/**
 * Created by freeman on 16-8-9.
 */
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as Actions from '../../actions'
import Content from './Content'
import Like from './Like'
import ModalLogin from '../Login/ModalLogin'
import Comment from './Comment'
const mapStateToProps = state => {
    return {
        articleDetail: state.articleDetail,
        auth: state.auth,
        commentList:state.commentList
    }
};

const mapDispatchToProps = dispatch => {
    return {
        actions: bindActionCreators(Actions, dispatch)
    }
};


class Article extends Component {
    constructor(props) {
        super(props)
        this.toggleLike = this.toggleLike.bind(this);
        this.openLoginModal = this.openLoginModal.bind(this);
        this.closeLoginModal = this.closeLoginModal.bind(this);
        this.handleSubmitReply = this.handleSubmitReply.bind(this);
        this.handleSubmitComment = this.handleSubmitComment.bind(this);

        this.state = {showModal:false}
    }

    static propTypes = {
        articleDetail: PropTypes.object.isRequired,
        commentList:PropTypes.object.isRequired,
        actions: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired,
        params: PropTypes.object.isRequired
    };


    componentDidMount() {
        const {params:{id}, actions, articleDetail} = this.props;
        if (!articleDetail._id || articleDetail._id !== id) {
            this.fetchArticleData(id);
        }
    }

    fetchArticleData(id) {
        const {actions} = this.props;

        if (id) {
            actions.getArticleDetail(id);
            actions.getCommentList(id);
        }
    }
    toggleLike(){
        const {actions,params,auth} = this.props
        if(auth.token){
            actions.toggleLike(params.id)
        }else{
            this.openLoginModal()
        }
    }
    handleSubmitComment(e,content){
        e.preventDefault()
        const {actions,params} = this.props
        //提交新评论
        actions.addComment({aid:params.id,content:content})
    }
    //提交回复
    handleSubmitReply(e,cid,content){
        e.preventDefault()
        const {actions} = this.props
        actions.addReply(cid,{content:content})
    }

    openLoginModal(){
        this.setState({showModal:true})
    }

    closeLoginModal(){
        this.setState({showModal:false})
    }
    render() {
        const { articleDetail,commentList,auth,actions } = this.props;
        return (
            <div className="article-box">
               <Content articleDetail={articleDetail} />
                <Like isLike={articleDetail.isLike} likeCount={articleDetail.like_count} toggleLike={this.toggleLike}/>
                <Comment commentList={commentList} auth={auth} openLoginModal={this.openLoginModal} submitReply={this.handleSubmitReply} submitComment={this.handleSubmitComment}  />
                <ModalLogin isShowModal={this.state.showModal} closeModal={this.closeLoginModal}/>
            </div>
        )
    }
}
Article = connect(mapStateToProps, mapDispatchToProps)(Article);
export default Article;
